<template>
	<cpopup ref="popup" :safe-area="false">
		<view class="gg-pop" :class="ggclass"
			:style="{ background:backs, backgroundSize, width,mixHeight, borderRadius: radius,paddingBottom}">
			<view class="title-box">
				<slot name="title">
					<c-text>
						{{title}}
					</c-text>
					<text class="iconfont close icon-guanbi" style="color: #999999; font-size: 30rpx;"
						@click="$refs.popup.close()"></text>
				</slot>
			</view>
			<scroll-view scroll-y :style="{maxHeight:maxHeight}" @scrolltolower="scrolltolower">
				<view class="" :style="{padding}">
					<slot></slot>
				</view>
			</scroll-view>
		</view>
	</cpopup>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import cpopup from './uni-popup/components/uni-popup/uni-popup.vue'
	export default {
		components:{cpopup},
		provide() {
			return {
				pop: this,
			};
		},
		inject: {
			parent: {
				default: {},
			},
		},
		name: 'c-pop',
		props: {
			title: {
				type: String,
				default: '自定义'
			},
			background: {
				type: String,
				// default: "#E7ECEA",
				default: "#fff",
			},
			background1: {
				type: String,
				default: "#3B3B3B",
			},
			backgroundSize: {
				type: String,
				default: "100% 100%",
			},
			isOpenPattern: {
				type: Boolean,
				default: false
			},
			ggclass: {
				type: String,
				default: '',
			},
			width: {
				type: String,
				default: "",
			},
			height: {
				type: String,
				default: "",
			},
			mixHeight: {
				type:String,
				default:'600rpx'
			},
			maxHeight: {
				type:String,
				default:'600rpx'
			},
			radius: {
				type: String,
				default: "",
			},
			padding: {
				type: String,
				default: "",
			},
		},
		data() {
			return {}
		},
		computed: {
			paddingBottom() {
				let safeAreaInsets = uni.getSystemInfoSync().safeAreaInsets
				return `${safeAreaInsets.bottom+20}rpx`
			},
			backs() {
				if (this.background.includes("data:image") || this.background.includes("http")) {
					return `url(${this.background})`;
				} else {
					if (this.isOpenPattern || this.parent.isOpenPattern) {
						let index = this.isLightPattern ? 0 : 1
						return [this.background, this.background1][index]
					}
					return this.background;
				}
			},
		},
		methods: {
			open(mode = 'bottom') {
				this.$refs.popup.open(mode)
			},
			close() {
				this.$refs.popup.close()
			},
			scrolltolower(e) {
				this.$emit('scrolltolower', e)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.gg-pop {
		z-index: 10;
	}

	.title-box {
		padding: 30rpx;
		display: flex;
		position: relative;
		justify-content: center;
		border-bottom: 2rpx solid #F8FAFF;

		.close {
			position: absolute;
			right: 40rpx;
		}
	}
</style>